<template>
  <view class="content">
    <view class="uni-padding-wrap uni-common-mt">
      <view class="input-group">
        <text>{{addr}}</text>
      </view>
      <uni-list>
        <view class="input-row border">
          <view class="title"></view>
          <label>{{who}}</label>
        </view>
      </uni-list>
    </view>
    <view class="uni-title uni-common-mt">
      <view class="input-group">
        <text>&nbsp;&nbsp;今日通行{{history.length}}次</text>
      </view>
      <uni-list>
        <uni-list-item v-for="(item, index) in history" :key="index" :title="formatHistory(item)" :show-arrow="false"></uni-list-item>
      </uni-list>

      <view class="input-group">
        <form @submit="formSubmit">
          <view class="uni-form-item uni-column input-row border">
            <view class="title">方向：</view>
            <radio-group name="direct">
              <label>
                <radio value="0" checked="true" /><text>外出</text>
              </label>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <label>
                <radio value="1" /><text>进入</text>
              </label>
            </radio-group>
          </view>
          <view class="uni-form-item uni-column input-row border">
            <view class="title">体温：</view>
            <radio-group name="temperature">
              <label>
                <radio value="0" checked="true" /><text>正常</text>
              </label>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <label>
                <radio value="1" /><text>异常</text>
              </label>
            </radio-group>
          </view>
          <view class="uni-form-item uni-column input-row border">
            <view class="title">备注: </view>
            <input class="uni-input m-input" name="remark" placeholder="" />
          </view>
          <view class="uni-form-item uni-column">
            <view class="uni-btn-v">
              <button type="primary" form-type="submit">提交</button>
            </view>
          </view>
        </form>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import {
    uniList,
    uniListItem
  } from '@dcloudio/uni-ui'
  import mInput from '../../components/m-input.vue'
  import service from '../../service.js'
  export default {
    components: {
      uniList,
      uniListItem,
      mInput
    },
    onLoad(options) {
      this.residentId = options.residentId
      uni.request({
        url: service.getServer() + '/api/residents/' + this.residentId,
        data: {},
        header: {
          'Authorization': service.getToken()
        },
        success: (res) => {
          if (res.statusCode !== 200) {
            uni.showToast({
              icon: 'none',
              title: '获取居民信息失败',
            });
          } else {
            const resident = res.data
            this.addr = resident.phase + '期' + resident.building + '栋' + resident.unit + '单元' + resident.floor +
              '楼' + resident.number + '号'
            this.who = resident.name + ' (' + this.formateIdCard(resident.idCard) + ')'
          }
        }
      })
      uni.request({
        url: service.getServer() + '/api/passrecords/todayHistory/' + this.residentId,
        data: {},
        header: {
          'Authorization': service.getToken()
        },
        success: (res) => {
          if (res.statusCode !== 200) {
            uni.showToast({
              icon: 'none',
              title: '获取今日通行历史失败',
            });
          } else {
            this.history = res.data
          }
        }
      })
    },
    data() {
      return {
        residentId: '',
        addr: '',
        who: '',
        times: 0,
        history: []
      }
    },
    methods: {
      formateIdCard(idCard) {
        return idCard.substring(0, 3) + '***' + idCard.substring(14, idCard.length)
      },
      formatDate(datetime) {
        return datetime.split(' ')[1];
      },
      formatHistory(item) {
        return this.formatDate(item.createdTime) + ' ' + (item.direct === 0 ? '外出' : '进入') + ', 体温: ' + (item.temperature ===
          0 ? '正常' : '异常')
      },
      formSubmit(e) {
        e.preventDefault()
        let formData = e.detail.value
        formData.residentId = this.residentId
        uni.request({
          url: service.getServer() + '/api/passrecords',
          method: 'post',
          data: formData,
          header: {
            'Authorization': service.getToken()
          },
          success: (res) => {
            if (res.statusCode !== 200) {
              uni.showToast({
                icon: 'none',
                title: '通行记录提交失败',
              });
            } else {
              uni.showToast({
                icon: 'none',
                title: '提交成功',
              });
              setTimeout(() => {
                // 返回点击扫码页面
                uni.navigateBack({
                    delta: 2
                });
              }, 1000)
            }
          }
        })

      }
    }
  }
</script>

<style>
  .uni-form-item {
    margin: 2rem auto;
  }
</style>
